<template>
  <div>
    <h1>样式绑定：绑定class属性</h1>
    <div :class="{ red: isRed, green: isGreen }">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto,
        voluptatum!
      </p>
    </div>
    <button @click="handleClick">点击我</button>
    <div class="obj">
      <p @click="handleClick1">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto,
        voluptatum!
      </p>
      <button @click="handleClick1">点击我</button>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
const handleClick1 = (event) => {
  event.target.style.color = "red";
};
const isRed = ref(true);
const isGreen = ref(false);
const classObj = ref({
  red: isRed.value,
  green: isGreen.value
});
const handleClick = () => {
  isRed.value = !isRed.value;
  //   alert(isRed.value);
  isGreen.value = !isGreen.value;
  //   alert(isGreen.value);
};
</script>
<style scoped>
.red {
  color: red;
}
.green {
  color: green;
}
.obj {
  color: rgb(0, 255, 76);
}
</style>
